<!--
 * @Date: 2022-01-06 11:27:59
 * @LastEditTime: 2022-01-06 15:13:08
 * @LastEditors: hudo
 * @Description: 
 * @FilePath: \am-ui\src\pages\am\monitor\Monthly.vue
-->
<!--
 * @Date: 2021-12-22 16:33:02
 * @LastEditTime: 2022-01-06 11:26:33
 * @LastEditors: Hudo
 * @Description: 
-->
<template>
  <div class="monthly">
    <div class="content">
      <div class="left">
        <!-- 搜索框 -->
        <el-input
          class="search"
          placeholder="请输入设备关键字"
          v-model="filterText"
          clearable
          style="width: 97%; margin-top: 10px; margin-bottom: 10px"
        ></el-input>

        <!-- 工程设备树 -->
        <el-tree
          class="filter-tree"
          :data="edTree"
          :props="props"
          @node-click="handleNodeClick"
          :filter-node-method="filterNode"
          ref="tree"
        >
        </el-tree>
      </div>
      <div class="right">
        <!-- 选择月份 -->
        <el-form inline size="small" :model="params">
          <el-form-item>
            <el-date-picker
              style="margin-top: 10px"
              v-model="params.date"
              placeholder="请选择月份"
              type="month"
              value-format="yyyy-MM"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button
              icon="el-icon-search"
              style="margin-top: 10px"
              size="mini"
              type="primary"
              @click="queryMonthData"
              >搜索</el-button
            >
          </el-form-item>
        </el-form>

        <!-- 表格   -->

        <div>
          <template>
            <!-- 未选择设备时 -->
            <el-table
              v-if="monthData == null"
              :data="monthData"
              style="width: 100%"
              empty-text="请选择工程下的设备"
            >
            </el-table>

            <!-- 选择设备时 -->
            <el-table
              v-else
              empty-text="暂无相关数据"
              :data="monthData"
              style="width: 100%"
            >
              <el-table-column prop="d" label="日期" width="150" align="center">
              </el-table-column>
              <el-table-column
                prop="tsp"
                label="悬浮颗粒物"
                width="100"
                align="center"
              >
              </el-table-column>
              <el-table-column prop="pm10" label="Pm10" align="center">
              </el-table-column>
              <el-table-column prop="pm25" label="Pm2.5" align="center">
              </el-table-column>
              <el-table-column
                prop="noise"
                label="噪音"
                width="50"
                align="center"
              >
              </el-table-column>
              <el-table-column prop="temperature" label="温度" align="center">
              </el-table-column>
              <el-table-column
                prop="humidity"
                label="湿度"
                width="50"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="wind_speed"
                label="风速"
                width="50"
                align="center"
              >
              </el-table-column>
              <el-table-column
                prop="wind_direction"
                label="风向"
                align="center"
              >
              </el-table-column>
            </el-table>
            <!-- 分页区 -->
            <el-pagination
              hide-on-single-page
              style="float: right"
              background=""
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="parseInt(monthData.page)"
              :page-sizes="[5, 10, 15, 20]"
              :page-size="parseInt(monthData.pageSize)"
              layout="total, sizes, prev, pager, next, jumper"
              :total="parseInt(monthData.total)"
            >
            </el-pagination>
          </template>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { get } from "@/utils/request.js";
export default {
  data() {
    return {
      edTree: [],
      selectTime: [],
      props: {
        label: "name",
        value: "id",
      },

      params: {
        page: 1,
        pageSize: 10,
      },

      monthData: {},
      newEdTree: [],
      filterText: "",
    };
  },

  watch: {
    //监测输入框内容
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },

  methods: {
    filterNode(value, edTree) {
      //value是输入框输入的值
      if (!value) return true;

      //返回名称与输入值相同的edTree
      //indexOf(value)==-1不显示
      return edTree.name.indexOf(value) !== -1;
    },

    //树形节点点击事件
    handleNodeClick(data) {
      // console.log(data);
      //点击工程不查询
      if (data.engineer_id) {
        this.params = {
          ...this.params,
          engineer_id: data.engineer_id,
          device_id: data.id,
        };
        // 调用请求数据的方法
        this.queryMonthData();
      }
    },

    ///查询工程设备树
    findEngineerDeviceTree() {
      get("/engineer/findEngineerDeviceTree").then((res) => {
        let arr = res.data;
        arr.forEach((element, index) => {
          //遍历arr
          if (element.children.length == 0) {
            //将空的删掉
            delete arr[index];
          }
        });
        // console.log(arr);
        var r = arr.filter((item) => {
          //过滤掉空的
          return item !== null || item !== undefined || item !== ""; // 注：IE9(不包含IE9)以下的版本没有trim()方法
        });
        // console.log(r);
        this.edTree = r;
      });
    },

    //根据工程设备ID查询当月设备数据
    queryMonthData() {
      get("/monitor/queryMouthData", this.params).then((res) => {
        this.monthData = res.data;
      });
    },

    // 选择时间查询
    toSearchHandler() {
      this.params = {
        ...this.params,
        begin_time: this.selectTime[0],
        end_time: this.selectTime[1],
      };
    },

    // pageSize改变事件
    handleSizeChange(pageSize) {
      // 将分页插件最新的参数赋值给params
      this.params.pageSize = pageSize;
      // 调用查询设备的方法(数据重载)
      this.queryMonthData();
    },
    //  page改变事件
    handleCurrentChange(page) {
      // 将分页插件最新的参数赋值给params
      this.params.page = page;
      // 调用查询设备的方法(数据重载)
      this.queryMonthData();
    },
  },

  created() {
    this.findEngineerDeviceTree();
    // this.clearEdTree();
  },
};
</script>
<style scoped>
.content {
  display: flex;
}
.left {
  width: 25%;
  border-right: 1px solid #d9d9d9;
}
.right {
  margin-left: 20px;
  width: 75%;
}

.searchTime {
  display: flex;
  justify-content: center;
  /* margin: 0 auto; */
}
.action {
  height: 500px;
  line-height: 500px;
  text-align: center;
  font-size: 30px;
  color: #999999;
}
::v-deep .el-icon-caret-right:before {
  content: "\e723";
  font-size: 16px;
}

::v-deep .expanded:before {
  content: "\e722";
  font-size: 16px;
}
</style>